<template>
  <div>
    <!-- @timeupdate="updateProgress" -->
    <audio
      controls
      ref="audioRef"
      @timeupdate="updateProgress"
      style="display: none"
    >
      <source :src="fileurl" type="audio/mpeg" />
      您的浏览器不支持音频播放
    </audio>
    <div class="audio-right">
      <div class="newsaudio">
        <div class="newsaudio_left">
          <div class="audio-time" style="min-height: 10px">
            <span class="audio-length-current" id="audioCurTime">{{
              audioStart
            }}</span>
            /
            <span class="audio-length-total">{{ duration }}</span>
          </div>
          <div class="pfzt">
            <span class="iconbtn" @click="playAudio">
              <img
                v-if="audioStatus !== 'pause'"
                src="../assets/img/icon_play.png"
              />
              <img v-else src="../assets/img/icon_pause.png" />
            </span>
            <div
              class="progress-bar-bg"
              id="progressBarBg"
              v-dragto="setAudioIcon"
            >
              <div class="progress-bar" id="progressBar"></div>
            </div>
          </div>
        </div>
        <div class="newsaudio_right">
          <div class="volume">
            <span class="iconbtn" @click.stop="audioHuds = !audioHuds">
              <img src="../assets/img/yinliang.png" />
            </span>
            <div
              @click.stop="
                () => {
                  return false;
                }
              "
              class="volume-progress"
            >
              <div
                class="volume-bar-bg"
                id="volumeBarBg"
                v-adjuster="handleShowMuteIcon"
              >
                <div class="volume-bar" id="volumeBar"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>



export default {
  props: {
    fileurl: {
      trpe: String,
    },
  },
  data() {
    return {
      audioStatus: "play",
      audioStart: "0:00",
      duration: "0:00",
      audioVolume: 0.5,
      audioHuds: false,
    };
  },

  directives: {
    dragto: {
      inserted: function (el, binding, vnode) {
        el.addEventListener(
          "click",
          (e) => {
            let wdiv = document.getElementById("progressBarBg").clientWidth;
            let audio = vnode.context.$refs.audioRef;
            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            let ratemin = e.offsetX / wdiv;
            let rate = ratemin * 100;
            document.getElementById("progressBar").style.width = rate + "%";
            audio.currentTime = audio.duration * ratemin;
            audio.play();
            binding.value();
          },
          false
        );
      },
    },
    adjuster: {
      inserted: function (el, binding, vnode) {
        el.addEventListener(
          "click",
          (e) => {
            let hdiv = document.getElementById("volumeBarBg").clientWidth;
            let audio = vnode.context.$refs.audioRef;
            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            let ratemin = e.offsetX / hdiv;
            let rate = ratemin * 100;
            document.getElementById("volumeBar").style.width = rate + "%";
            audio.volume = ratemin;
            binding.value(rate / 100);
          },
          false
        );
      },
    },
  },
  computed: {
    audioIcon() {
      if (this.audioHuds) {
        return this.audioVolume < 0.01
          ? "checked icon-jingyin"
          : "checked icon-shengyin";
      } else {
        return "icon-shengyin";
      }
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    fetch() {
      let that = this;
      var myVid = this.$refs.audioRef;
      myVid.loop = false;
      // 监听音频播放完毕
      myVid.addEventListener(
        "ended",
        function () {
          that.audioStatus = "play"; // 显示播放icon
          document.getElementById("progressBar").style.width = "0%"; // 进度条初始化
        },
        false
      );
      if (myVid != null) {
        myVid.oncanplay = function () {
          that.duration = that.transTime(myVid.duration); // 计算音频时长
        };
        myVid.volume = 0.5; // 设置音量50%
      }
    },
    // 播放暂停控制
    playAudio() {
      let recordAudio = this.$refs.audioRef; // 获取audio元素
      if (recordAudio.paused) {
        recordAudio.play();
        this.audioStatus = "pause";
        this.$emit("changeplaystatus", true)
        this.$emit("play");
      } else {
        recordAudio.pause();
        this.audioStatus = "play";
        this.$emit("changeplaystatus", false)
      }
    },
    // 暂停
    pauseAudio() {
      let recordAudio = this.$refs.audioRef; // 获取audio元素
      recordAudio.pause();
      this.audioStatus = "play";
    },
    // 更新进度条与当前播放时间
    updateProgress(e) {
      var value = e.target.currentTime / e.target.duration;
      if (document.getElementById("progressBar")) {
        document.getElementById("progressBar").style.width = value * 100 + "%";
        if (e.target.currentTime === e.target.duration) {
          this.audioStatus = "pause";
        }
      } else {
        this.audioStatus = "pause";
      }

      this.audioStart = this.transTime(this.$refs.audioRef.currentTime);
    },
    /**
     * 音频播放时间换算
     * @param {number} value - 音频当前播放时间，单位秒
     */
    transTime(time) {
      var duration = parseInt(time);
      var minute = parseInt(duration / 60);
      var sec = (duration % 60) + "";
      var isM0 = ":";
      if (minute === 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length === 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
    setAudioIcon() {
      this.audioStatus = "pause";
    },
    handleShowMuteIcon(val) {
      this.audioVolume = val;
    },
  },
};
</script>

<style lang="scss"  scoped>
.audio-right {
  margin: 0 auto;
  width: 1200px;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 106px;
  background-image: linear-gradient(to right, #75e7ff, #9fda00);
  .newsaudio {
    display: flex;
    align-items: center;
    justify-content: center;
    .newsaudio_left {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .audio-time {
        overflow: hidden;
        font-size: 20px;
        color: #008f6e;
        .audio-length-total {
          float: right;
        }
        .audio-length-current {
          float: left;
        }
      }
      .pfzt {
        display: flex;
        align-items: center;
      }
    }
  }
}
.iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.newsaudio_right {
  padding-top: 20px;
}
.volume {
  display: flex;
  align-items: center;
  .volume-progress {
    width: 140px;
    height: 10px;
    border-radius: 10px;
  }
  .volume-bar-bg {
    margin: 0 auto;
    width: 120px;
    height: 10px;
    background: #dcdcdc;
    border-radius: 100px;
    flex: 1;
    position: relative;
    cursor: pointer;
    .volume-bar {
      width: 50%;
      height: 10px;
      background: #56bf8b;
      border-radius: 100px;
    }
  }
  .checked {
    color: #56bf8b;
  }
}
.audio-right {
  .dialogAudioPlay {
    cursor: pointer;
    color: #5c5e66;
    font-size: 20px;
  }
  .progress-bar-bg {
    width: 600px;
    height: 4px;
    background-color: #fff;
    flex: 1;
    height: 10px;
    cursor: pointer;
    border-radius: 100px;
  }
  .progress-bar {
    background-color: #56bf8b;
    width: 0%;
    height: 10px;
    border-radius: 5px;
  }
}
@media screen and (max-width: 1200px) {
  .audio-right {
    width: 100%;
    height: 58px;
  }
  .newsaudio_right {
    display: none;
  }
  .audio-right .progress-bar-bg{
    width: 280px;
  }
  .audio-right .newsaudio .newsaudio_left .audio-time{
    position:absolute;
    font-size: 14px;
  }
}
</style>

